<template>
    <div class="dept-update-member-container">
        <Selector @on-change="getChange" :mode="2"/>
        <Updata_Modal :modal_props="modal" :content="modal_content" @on-change="updateModal"/>
        <div class="dept-update-member-content" v-if="curGroup.length != 0">
            <div
                class="dept-update-member-content-record" 
                v-for="(stu_item, index) in curGroup.studentList" 
                @mouseover="saveRecord(stu_item)"
                :key="index">
                <span class="dept-update-member-content-record-span" @click="jump(stu_item)">{{stu_item.name}}</span>
                <span class="dept-update-member-content-record-span">{{stu_item.sid}}</span>
                <span class="dept-update-member-content-record-span">
                    <Select 
                        v-model="stu_item.dept" style="width: 100%" 
                        @on-change="changeDept">
                        <Option 
                            v-for="dept_item in $store.state.info.depts" 
                            :value="dept_item.deptName" 
                            :key="dept_item.value">
                            {{ dept_item.deptName }}
                        </Option>
                    </Select>
                </span>
                <span class="dept-update-member-content-record-span">
                    <Select 
                        v-model="stu_item.group" style="width: 100%" 
                        @on-change="changeGroup">
                        <Option 
                            v-for="group_item in stu_item.gList" 
                            :value="group_item" 
                            :key="group_item">
                            {{ group_item }}
                        </Option>
                    </Select>
                </span>
                <span class="dept-update-member-content-record-span">
                    {{stu_item.college}}
                </span>
                <span class="dept-update-member-content-record-span">
                    <Cascader :data="dutyTimes" v-model="stu_item.dutyList"></Cascader>
                </span>
            </div>
        </div>
    </div>
</template>

<script>

import Selector from "@dept/vue/selector-index";
import Updata_Modal from '@dept/vue/update-modal'
import local_js from "@dept/js/util"

export default {
    data() {
        return {
            curGroup: [],       // 当前要展示的小组
            curStu: null,
            stuGroup: [],       // 学生该部门的小组
            dutyTimes: [],
            modal: false,
            modal_content: {type: -1}
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        /**
         * 初始化，
         */
        init() {
            let groups = this.$jspt.getDept(undefined, this.$store.state.user.dept).groupList
            for (let i = 0; i < groups.length; i++) 
                this.stuGroup.push(groups[i].groupName)
            this.dutyTimes = local_js.getDutyTimes()
        },
        /**
         * 当选择的小组发生改变时触发
         * 获取到学生列表，调用函数进行处理，最后进行展示
         * @param {Object} v 小组对象，包括小组名和学生列表
         */
        getChange(v) {
            let stu_list = v.studentList
            v.studentList = local_js.parseDuty(stu_list, this.stuGroup)
            this.curGroup = v
        },
        changeDept(v) {
            this.modal_content = {
                type: 0,
                text: `是否要将${this.curStu.name}从${this.curStu.dept}移动到${v}`,
                title: "修改学生部门"
            }
            console.log(this.modal_content)
            this.modal = true
        },
        changeGroup(v) {
            console.log(v)
        },
        /**
         * 点击学生姓名是触发，将被点击的学生信息保存至 vuex
         * 接着跳转到个人中心对其进行展示
         */
        jump(v) {
            this.$store.state.view.profile.user = v
            this.$router.replace("/profile")
        },
        saveRecord(v) {
            this.curStu = {
                name: v.name,
                sid: v.sid,
                dept: v.dept,
                group: v.group,
                duty: v.dutyList
            }
        },
        updateModal(v) {
            this.modal = v.modal
        }
    },
    components: {
        Selector,
        Updata_Modal
    }
}
</script>

<style lang="scss">
@import "@dept/scss/update-member.scss";
</style>